<template>
    <div class="page">
        <p>过渡好动画</p>
        <div id="container"></div>
    </div>
</template>
<script>
import * as d3 from "d3"
export default {
    methods: {
        draw() {
            //预先定义好，svg的大小，以及 在svg内部作画的时候 各种padding的值
            let svgWidth = 400,
                svgHeight = 400;
            // padding = {
            //     top: 20,
            //     bottom: 20,
            //     left: 30,
            //     right: 20
            // };
            //使用d3创建一个svg元素
            this.svg = d3
                .select("#container")
                .append("svg")
                .attr("width", svgWidth)
                .attr("height", svgHeight)
            this.svg
                .append("rect")
                .attr("fill", "steelblue")
                .attr("x", 10)
                .attr("y", 10)
                .attr("width", 100)
                .attr("height", 30)
                .on("click", function(event) {
                    let point = d3.pointer(event)
                    console.log(point)
                })
                .transition()
                .duration(1000)
                .ease(d3.easeBounce)
                .attr("width", 300)
        }
    },
    mounted() {
        this.draw()
    }
}
</script>
